﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">

	<head th:replace="admin/template :: common_header(~{::title},~{::link})">
		<title></title>
		<link rel="stylesheet" href="../../assets/css/global.css" th:href="@{assets/css/global.css}" media="all">
		<link rel="stylesheet" href="../../assets/css/table.css" th:href="@{/assets/css/table.css}"/>
	</head>

	<body>
		<div class="admin-main">

			<blockquote class="layui-elem-quote">
				<a href="javascript:;" class="layui-btn layui-btn-small" id="add">
					<i class="layui-icon">&#xe608;</i> 添加信息
				</a>
				<a href="#" class="layui-btn layui-btn-small" id="delete">
					<i class="layui-icon">&#xe640;</i> 批量删除
				</a>
			</blockquote>
			<fieldset class="layui-elem-field">
				<legend>数据列表</legend>
				<div class="layui-field-box layui-form">
					<table class="layui-table admin-table">
						<thead>
							<tr>
								<th style="width: 30px;"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
								<th>用户名</th>
								<th>名称</th>
								<th>邮箱</th>
								<th>状态</th>
								<th>角色</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="content">
						</tbody>
					</table>
				</div>
			</fieldset>
			<div class="admin-table-page">
				<div id="paged" class="page">
				</div>
			</div>
		</div>
		<!--模板-->
		<script type="text/html" id="tpl">
			{{# layui.each(d.content, function(index, item){ }}
			<tr>
				<td><input type="checkbox" lay-skin="primary"></td>
				<td>{{ item.username|| '' }}</td>
				<td>{{ item.name|| '' }}</td>
				<td>{{ item.email|| '' }}</td>
				<td>
					{{#  if( item.status==0){ }}
						<input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用" checked="checked"/>
					{{#  } }}
					{{#  if( item.status!=0){ }}
						<input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用"/>
					{{#  } }}
				</td>
				<td>
					{{# layui.each(item.roles, function(index, item){ }}
					{{ item.name || ''}}
					{{# }); }}
				</td>
				<td>
					<a href="javascript:;" data-id="{{ item.id }}" data-opt="edit" class="layui-btn layui-btn-mini"><span class="layui-icon">&#xe642;</span>编辑</a>
					<a href="javascript:;" data-id="{{ item.id }}" data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini"><span class="layui-icon">&#xe640;</span>删除</a>
				</td>
			</tr>
			{{# }); }}
		</script>
		<script type="text/javascript" src="../../assets/plugins/layui/layui.js" th:src="@{assets/plugins/layui/layui.js}"></script>
		<script>
			layui.config({
				base: '/assets/js/'
			});
			layui.use(['paging', 'form'], function() {
				var $ = layui.jquery,
					paging = layui.paging(),
					layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
					layer = layui.layer, //获取当前窗口的layer对象
					form = layui.form();
				form.verify({
					title: function(value) {
						if(value.length < 5) {
							return '标题至少得5个字符啊';
						}
					},
					pass: [/(.+){6,12}$/, '密码必须6到12位'],
					regPwd: function(value) {
						var password = $("#password").val();
						if(value!=password ) {
							return '两次密码不一致';
						}
					}
				});
                paging.init({
                    openWait: true,
                    url: 'user/list', //地址
					elem: '#content', //内容容器
					openWait:'true',
					type: 'POST',
					tempElem: '#tpl', //模块容器
					pageConfig: { //分页参数配置
						elem: '#paged', //分页容器
						pageSize: 1 //分页大小
					},
					fail: function(msg) { //获取数据失败的回调
						parent.layer.alert('获取数据失败')
					},
					complate: function() { //完成的回调
						form.render('checkbox');
						form.on('checkbox(allselector)', function(data) {
							var elem = data.elem;
							$('#content').children('tr').each(function() {
								var $that = $(this);
								//全选或反选
								$that.children('td').eq(0).children('input[type=checkbox]')[0].checked = elem.checked;
								form.render('checkbox');
							});
						});

						//绑定所有编辑按钮事件						
						$('#content').children('tr').each(function() {
							var $that = $(this);
							$that.children('td:last-child').children('a[data-opt=edit]').on('click', function() {
								edit("修改用户信息",{"id":$(this).data('id')});
							});
							$that.children('td:last-child').children('a[data-opt=del]').on('click', function() {
								layer.msg($(this).data('id'));
							});
						});
					}
				});
				//获取所有选择的列
				$('#delete').on('click', function() {
					var names = '';
					$('#content').children('tr').each(function() {
						var $that = $(this);
						var $cbx = $that.children('td').eq(0).children('input[type=checkbox]')[0].checked;
						if($cbx) {
							var n = $that.children('td:last-child').children('a[data-opt=edit]').data('id');
							names += n + ',';
						}
					});
					layer.msg('你选择的名称有：' + names);
				});
				var addBoxIndex = -1;
				$('#add').on('click', function() {
					edit("修改用户信息",null);
				});
				function edit(title,parameter){
					if(addBoxIndex !== -1)
						return;
					//本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
					$.post('user/edit',parameter, function(form) {
						addBoxIndex = layer.open({
							type: 1,
							title: title,
							content: form,
							btn: ['保存', '取消'],
							shade: false,
							offset: ['30px', '30%'],
							area: ['400px', '350px'],
							zIndex: 19940202,
							maxmin: true,
							yes: function(index) {
								//触发表单的提交事件
								$('form.layui-form').find('button[lay-filter=edit]').click();
							},
							full: function(elem) {
								var win = window.top === window.self ? window : parent.window;
								$(win).on('resize', function() {
									var $this = $(this);
									elem.width($this.width()).height($this.height()).css({
										top: 0,
										left: 0
									});
									elem.children('div.layui-layer-content').height($this.height() - 95);
								});
							},
							success: function(layero, index) {
								//弹出窗口成功后渲染表单
								var form = layui.form();
								form.render();
								form.on('submit(edit)', function(data) {
									console.log(data.field);
//									return;
									$.ajax({
										type:"POST",
										url:"user/save",
										data:data.field,
										dataType: 'json',
										success: function (result) {
											if(result.code){
												layer.msg("添加成功")
												location.reload();
											}else{
												layer.msg("添加失败")
											}


										},error:function(data){

										}
									});
									return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
								});
								//console.log(layero, index);
							},
							end: function() {
								addBoxIndex = -1;
							}
						});
					});
				}
			});
		</script>
	</body>

</html>